<template>
  <div>
    <div v-if="messageVisible" class="custom-message" @click="openDialog">
      <span class="icon">ⓘ</span>
      当前被调度到的地点是：{{ message }}
      <span v-if="showClose" class="close-btn" @click.stop="closeMessage">×</span>
    </div>

    <el-dialog
      v-model="dialogVisible"
      title="调度历史"
      width="50%"
      :before-close="closeDialog"
    >
      <div>
        <el-table :data="taskHistory">
          <el-table-column property="tid" label="管理员号" width="120" />
          <el-table-column property="place" label="地点" width="160" />
          <el-table-column property="finished" label="是否完成" width="120" />
          <el-table-column property="starttime" label="开始时间" width="150" />
          <el-table-column property="endtime" label="结束时间" />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    showClose: {
      type: Boolean,
      default: true
    },
    duration: {
      type: Number,
      default: 0
    },
    socketUrl: {
      type: String,
      default: 'http://1.92.204.101'
    }
  },
  data() {
    return {
      messageVisible: true,
      message: '无',
      dialogVisible: false,
      taskHistory: [],
      email: '',
      socket: null
    }
  },
  mounted() {
    this.connectSocket()
    this.startAutoClose()
    const userInfoString = sessionStorage.getItem('userInfo')
    if (userInfoString) {
      try {
        const userInfo = JSON.parse(userInfoString)
        this.email = userInfo.email
      } catch (error) {
        console.error('Error parsing userInfo from sessionStorage:', error)
      }
    } else {
      console.log('No user info found in sessionStorage.')
    }
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.disconnect()
    }
  },
  methods: {
    closeMessage() {
      this.messageVisible = false
      if (this.socket) {
        this.socket.disconnect()
      }
    },
    startAutoClose() {
      if (this.duration > 0) {
        setTimeout(() => {
          this.closeMessage()
        }, this.duration)
      }
    },
    connectSocket() {
      this.socket = io(this.socketUrl)
      this.socket.on('message', (data) => {
        this.message = data
      })
      this.socket.on('disconnect', () => {
        console.log('Socket disconnected')
      })
    },
    fetchTasks() {
      this.axios.get(`https://apifoxmock.com/m1/4767131-4420546-default/task/get_task_history`, { params: { email: this.email }})
        .then(response => {
          if (Array.isArray(response.data.taskHistory)) {
            this.taskHistory = response.data.taskHistory
          } else {
            this.taskHistory = []
          }
        })
        .catch(error => {
          this.taskHistory = []
          console.error('Error searching taskHistory:', error)
        })
    },
    openDialog() {
      this.fetchTasks()
      this.dialogVisible = true
    },
    closeDialog(done) {
      this.dialogVisible = false
      done()
    }
  }
}
</script>

<style scoped>
.icon {
  position: absolute;
  top: 10px;
  left: 5px;
  cursor: pointer;
}
.custom-message {
  padding: 10px;
  border-radius: 4px;
  background-color: #000000;
  color: #ffa600;
  position: fixed;
  top: 10px;
  left: 50vw;
  white-space: nowrap;
  z-index: 1000;
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 2px;
  cursor: pointer;
}
.custom-message:hover {
  background-color: #414141;
}
</style>
